<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
      v-if：
          写法：
              v-if="表达式"
              v-else-if="表达式"
              v-else="表达式"
          适用于：切换频率较低的场景；
          特点：不展示的 DOM 元素直接被移除；
          注意：v-if 可以和  v-else-if、v-else 一起使用，但要求结构不能被"打断"。
      
      v-show:
          写法：v-show="表达式"
          适用于：切换频率较高的场景；
          特点：不展示的 DOM 元素未被一出，仅仅是使用样式隐藏掉。

      备注：使用 v-if 时，元素可能无法获取到，而是用 v-show 一定可以获取到。
    -->
    <!-- 准备一个容器 -->
    <div id="root">
      <!-- 使用 v-show 做条件渲染 -->
      <!-- <h2 v-show="false">欢迎{{name}}</h2>
      <h2 v-show="1 === 1">欢迎{{name}}</h2> -->

      <!-- 使用 v-if 做条件渲染 -->
      <!-- <h2 v-if="false">欢迎{{name}}</h2>
      <h2 v-if="1 === 1">欢迎{{name}}</h2> -->

      <!-- v-else 和 v-else-if -->
      <div>此时 n 的值为 {{n}}</div>
      <div v-if="n === 1">1</div>
      <div v-else-if="n === 2">2</div>
      <div v-else-if="n === 3">3</div>
      <div v-else>其他</div>
      <button @click="n ++">点我 n + 1</button>
    </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示
    const vm = new Vue({
        el: '#root',
        data:{
            name: '凌宸',
            n:0
        }
    })
</script>
</html>